<template>
	<view>
		<u-search placeholder="请输入商品名称" :hide-right="true" v-model="keyword" @custom="search"
			@search="search"></u-search>
		<view class="tabs">
			<view class="tabs-item active" @click="selectShow=true">
				<template>
					<text>{{currAgent.name}}</text>
					<u-icon class="ml10" size="24" :name="selectShow?'arrow-up':'arrow-down'"></u-icon>
				</template>
			</view>
		</view>
		<u-tabs v-if="false" :list="tabList" :is-scroll="false" :current="currTab" @change="e=>currTab=e"></u-tabs>

		<view style="padding: 0 20rpx;">
			<view v-for="(item,index) in dataList" :key="index" class="mt20 bg-white row"
				style="border-radius: 20rpx;padding:20rpx;gap:20rpx">
				<image :src="item.image" mode="aspectFill" style="width: 160rpx;height: 160rpx;"></image>
				<view class="column flex1" style="gap: 20rpx;">
					<view class="black">
						{{item.name}}
					</view>
					<u-tag :text="item.agent_name" type="error" mode="light" />
					<view class="lighter row-between">
						<view>{{item.min_price}}</view>
						<view>库存：<text class="black">{{item.lease_stock}}</text></view>
					</view>
				</view>
			</view>
		</view>

		<agent-poup-choose-vue v-model="selectShow" :loadFunc="loadFunc" :curr-data="currAgent"
			@change-curr-data="changeAgent"></agent-poup-choose-vue>
	</view>
</template>

<script>
	import agentPoupChooseVue from "../../components/agent-poup-choose/agent-poup-choose.vue";
	import {
		getAgentList,
		getDistributionAgentGoods
	} from "@/api/user";
	import {
		loadingFun
	} from '../../../utils/tools';
	import {
		loadingType
	} from '../../../utils/type';
	const tabList = [{
		name: "全部",
		id: 0,
	}, {
		name: "待租商品",
		id: 1,
	}, {
		name: "已租商品",
		id: 2,
	}, {
		name: "商品选购",
		id: 3,
	}]
	export default {
		data() {
			return {
				tabList: tabList,
				currTab: 0,

				page: 1,
				status: loadingType.LOADING,
				dataList: [],

				keyword: '',
				selectShow: false,

				currAgent: null,
				loadFunc: getAgentList,
			};
		},
		components: {
			agentPoupChooseVue
		},
		onLoad() {},
		onReachBottom() {
			this.getList();
		},
		watch: {
			currTab() {
				this.clear();
				this.getList();
			}
		},
		methods: {
			search() {
				this.clear()
				this.getList()
			},
			changeAgent(e) {
				this.currAgent = e;
				this.clear();
				this.getList();
			},
			/**
			 * 拨打电话
			 * @param tel 电话
			 */
			callPhone(tel) {
				uni.makePhoneCall({
					phoneNumber: tel
				})
			},
			toast(str) {
				this.$toast({
					title: str
				})
			},
			clear() {
				this.page = 1;
				this.status = loadingType.LOADING;
				this.dataList = [];
			},
			async getList() {
				const data = await loadingFun(getDistributionAgentGoods, this.page, this.dataList, this.status, {
					keyword: this.keyword,
					agent_id: this.currAgent?.id
				})
				if (data) {
					this.page = data.page;
					this.status = data.status;
					this.dataList = data.dataList
				}
			},
			toggleSort(prop) {
				let val = this.sort[prop];
				if (val < 2) {
					val++;
				} else if (val == 2) {
					val = 0
				}
				this.sort[prop] = val;
			}
		}
	}
</script>

<style lang="less">
	.tabs {
		display: flex;
		width: 100%;
		height: 80rpx;
		background-color: white;

		.tabs-item {
			flex: 1;
			line-height: 80rpx;
			text-align: center;

			&.active {
				color: var(--primary-color);
			}
		}
	}
</style>